<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";

require("echarts/theme/macarons"); // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "240px",
    },
    chartData: {
      type: Array,
      required: true,
    },
    chartColor: {
      type: Array,
      default: () => ["#3FC529", "#FBC225", "#E74629", "#E2E7EE"]
  
    },
    titleShow: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      chart: null,
      total: 11,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initChart();
      }, 100);
      
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions(chartData) {
      this.chart.setOption({
        color: ["#3FC529", "#FBC225", "#E74629", "#E2E7EE"],
        title: {
          show: false,
          zlevel: 0,
        
          top: "center",
          left: "center",
         
        },
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
          backGroundColor:"#fff",
        },
        legend: {
          show: false,
          left: "center",
          bottom: "10",
          // data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 10,
          top: 10,
          // containLabel: true
        },
        series: [
          {
            name: "运行状态",
            type: "pie",
            radius: ["45%", " 55%"],
            avoidLabelOverlap: true,
            label: {
              //标签
              normal: {
                show: true,
                position: "outer",
                // formatter: '{d}%, {c} \n\n',
                // 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
                // formatter: "{a_set|{b}\n{c}%}",
                formatter: function (params) {
                  let str = "";
                
                    str = params.name + "\n" + params.value + "%";
                  
                  return str;
                },
                borderWidth: 20,
                borderRadius: 4,
                textStyle:{
                  color:"#7C8CA5",
                }
                // padding: [90, -30],
                // rich: {
                //   a_set: {
                //     color: "#7F8FA4",
                //     lineHeight: 20,
                //     align: "center",
                //   },
                //   c_set: {
                //     color: "#000",
                //   },
                // },
              },
            },
            labelLine: {
              normal: {
                show: true, //引线隐藏
                length: 20,
                length2: 20,
              },
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: "12",
            //     // fontWeight: "bold",
            //   },
            // },

            data: chartData,
          },
        ],
      });
    },
  },
};
</script>
